<template>
  <el-container>
    <el-header height="40px" style="background-color: #00838f;">
      <h5 style="color: #fff;line-height: 40px;font-family: 'Microsoft YaHei',serif">权限管理</h5>
    </el-header>
    <el-main style="background-color: #fff;">
      <slot><searchbox></searchbox></slot>
      <el-table
        ref="multipleTable"
        :data="list"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column align="center"
                         label="权限名称"
                         width="300">
          <template slot-scope="scope">
            {{ scope.row.employee_level }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="人数"
                         width="300">
          <template slot-scope="scope">
            {{ scope.row.num }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="权限说明"
                         width="500">
          <template slot-scope="scope">
            {{ scope.row.employee_describe }}
          </template>
        </el-table-column>
        <el-table-column  align="center" fixed="right" label="操作">
          <template slot-scope="scope">
            <!--            <el-button-->
            <!--              size="mini"-->
            <!--              type="primary"-->
            <!--              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
            <authrityBtn @click.native="handleEdit(scope.$index, scope.row)" :adminData="scope.row">
              <p slot="slot_position">{{ scope.row.employee_level }}</p>
            </authrityBtn>
            <el-button
              size="mini"
              type="danger"
              @click="handleChange(scope.$index, scope.row)">停用</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button type="danger" size="mini" @click="handleDisable">全部停用</el-button>
        <el-button type="success" size="mini" @click="handleEnable">全部启用</el-button>
        <el-button type="info" size="mini" disabled>导出 Excel</el-button><!--导出到Excel表格按钮-->
      </div>
    </el-main>
  </el-container>
</template>

<script>
  import searchbox from '../ZF/searchbox'
  import authorityModel from '../ZF/authorityModel'
  export default {
    name: "limit",
    components:{
      searchbox,
      authrityBtn:authorityModel,
    },
    data() {
      return {
        list: []
      }
    },
    methods: {
      //选中行
      handleSelectionChange(val) {
        console.log('val:', val)
        // this.multipleSelection = val;
      },
      handleEdit(){
        // console.log(' index:', index)
        // console.log(' row:', row)
      },
      handleChange(){
        // console.log(' index:', index)
        // console.log(' row:', row)
      },
      handleDisable () {
        // this.singleTypeChange(this.chosenList, '停用')
      },
      handleEnable () {
        // this.singleTypeChange(this.chosenList, '启用')
      },
    },
    created(){
      this.$axiosx.get('/api/backGetLimit')
        .then((resopnse)=>{
          // console.log(resopnse.data)
          this.list=resopnse.data;
        })
    }
  }
</script>

<style scoped>

</style>
